<script setup>
import {ref, onMounted} from 'vue';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
// 引入添加节点的api
import {getNodeTreeApi, saveNodeApi, getNodeApi} from '@/service/auth.js';

const emit = defineEmits(['reload']);
const reload = () => {
  emit('reload');
}

// 加载节点树
const treeData = ref([]);
const fetchTreeData = () => {
  getNodeTreeApi().then(res => {
    treeData.value = res.data.tree;
  });
};

const drawerVisible = ref(false);
const ruleForm = ref({
  id: 0,
  parent_id: 0,
  name: '',
  title: '',
  path: '',
  api: '',
  icon: '',
  status: 0,
  is_menu: 1,
  sort: 0,
  hidden: 0
});

const rules = ref({
  name: [
    {required: true, message: '请输入路由名称', trigger: 'blur'}
  ],
  title: [
    {required: true, message: '请输入节点标题', trigger: 'blur'}
  ],
  path: [
    {required: true, message: '请输入VUE路由地址', trigger: 'blur'}
  ],
  status: [
    {required: true, message: '请输入状态', trigger: 'blur'}
  ],
  is_menu: [
    {required: true, message: '请输入菜单', trigger: 'blur'}
  ]
});

// 初始化form
const initForm = () => {
  ruleForm.value = Object.assign({}, {
    id: 0,
    parent_id: 0,
    name: '',
    title: '',
    path: '',
    api: '',
    icon: '',
    status: 0,
    is_menu: 1,
    sort: 0,
    hidden: 0
  });
}

// element-plus提供的所有icon
const icons = Object.keys(ElementPlusIconsVue);

// 提交数据
const ruleFormRef = ref(null);
const handleSave = () => {
  // 验证并提交数据
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        saveNodeApi(ruleForm.value).then((res) => {
          if (res.code === 200) {
            ElMessage.success(res.msg);
            reload();
            closeDrawer();
          } else {
            ElMessage.error(res.msg);
          }
        });
      } catch (e) {
        ElMessage.error(e.message);
      }
    }
  });
};

// 打开抽屉
const openDrawer = (row) => {
  drawerVisible.value = true;
  if (row) {
    getNodeApi({id: row.id}).then(res => {
      ruleForm.value = res.data;
    });
  }
  fetchTreeData();
};

// 关闭抽屉
const closeDrawer = () => {
  drawerVisible.value = false;
  initForm();
};

// 设置icon
const popRef = ref(null);
const setFormIcon = (icon) => {
  ruleForm.value.icon = icon;
  popRef.value.hide();
}

defineExpose({
  openDrawer,
  closeDrawer
});

</script>

<template>
  <el-drawer v-model="drawerVisible" size="30%" title="添加节点" :close-on-click-modal="false">
    <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px" label-position="top">
      <el-form-item label="父级编号" prop="parent_id">
        <el-cascader v-model="ruleForm.parent_id" :options="treeData"
                     :props="{label:'title', value:'id' ,checkStrictly: true, emitPath: false }"
                     placeholder="请选择父级渠道"
                     style="width:100%"></el-cascader>
      </el-form-item>
      <el-form-item label="节点标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="路由名称" prop="name">
        <el-input v-model="ruleForm.name"/>
      </el-form-item>
      <el-form-item label="VUE路由地址" prop="path">
        <el-input v-model="ruleForm.path"></el-input>
      </el-form-item>
      <el-form-item label="API接口" prop="api">
        <el-input v-model="ruleForm.api"></el-input>
      </el-form-item>
      <el-form-item label="路由ICON" prop="icon">
        <el-input v-model="ruleForm.icon">
          <template #suffix>
            <el-popover placement="right" :width="400" trigger="click" ref="popRef">
              <template #reference>
                <el-icon size="16" style="cursor: pointer;">
                  <Picture/>
                </el-icon>
              </template>
              <div class="grid-icons">
                <div class="grid-icon" v-for="icon in icons" :key="icon" @click="setFormIcon(icon)">
                  <el-icon style="cursor: pointer" size="24">
                    <component :is="icon"/>
                  </el-icon>
                </div>
              </div>
            </el-popover>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch v-model="ruleForm.status" active-value="1" active-text="启用" inactive-value="0"
                   inactive-text="禁用"/>
      </el-form-item>
      <el-form-item label="菜单" prop="is_menu">
        <el-radio-group v-model="ruleForm.is_menu">
          <el-radio :value="1">菜单</el-radio>
          <el-radio :value="2">目录</el-radio>
          <el-radio :value="3">事件</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="ruleForm.sort" type="number"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button @click="closeDrawer">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style scoped lang="less">
.grid-icons {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  max-width: calc(100vw / 2);
  max-height: calc(100vh / 2);
  overflow: auto;

  .grid-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
}
</style>
